<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>snabbdom</title>
</head>
<body>
<div id="app"></div>
<button id="btn">change</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>
<script>
    var snabbdom = window.snabbdom

    // 定义patch
    var patch = snabbdom.init({
        snabbdom_class,
        snabbdom_props,
        snabbdom_style,
        snabbdom_eventlisteners
    })

    // 定义h
    var h = snabbdom.h

    var container = document.getElementById('app')
    // 生成vnode
    var vnode = h('ul#list', {}, [
        h('li.item', {}, 'item1'),
        h('li.item', {}, 'item2'),
    ])

    patch(container, vnode)

    document.getElementById('btn').addEventListener('click', () => {
        var newnode = h('ul#list', {}, [
            h('li.item', {}, 'item1'),
            h('li.item', {}, 'itemA'),
            h('li.item', {}, 'item3')
        ])
        // patch 会对比新秀虚拟dom的差异，然后渲染
        patch(vnode, newnode)
    })
</script>
</body>
</html>